41 KONSEP KERANGKA DESAIN 


Pada Bab 4 ini, secara khusus penulis akan membahas mengenai 
masalah desain. Jika dalam metode waterfall, tahap ini telah sampai 
ke dalam tahap design. Konsep yang dipakai oleh sistem informasi 
nilai biasanya berupa kerangka 1 kolom ataupun 2 kolom. Namun, 
di sini penulis akan membangun sistem ini menggunakan konsep 
kerangka web 1 kolom. Untuk lebih jelasnya dapat Anda lihat pada 
Gambar 4.1. 


Banner 


Menu Top 


Konten 


Footer 


Gambar 4.1 Kerangka Desain Utama 
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Terbagi atas empat baris utama. Berikut penjelasannya masing- 
masing dari baris tersebut. 


1. Banner, digunakan untuk meletakkan banner. Banner di sini 
bisa berupa logo kampus yang bersangkutan. 


2. Menu Top, digunakan untuk menampilkan menu-menu utama 
yang digunakan sebagai sarana untuk mengolah suatu data. 


3. Konten, merupakan tempat untuk menampilkan informasi. 
Segala aktivitas yang dilakukan akan ditampilkan pada bagian 
tersebut. 


4. Footer, digunakan sebagai footer. Dalam artian sebagai infor- 
masi best view, nama kampus, ataupun copyright. 


4.2 MENGENAL TIPE FONT DAN WARNA 


Penulis pernah membahas mengenai tipe font dan warna pada seri 
buku penulis sebelumnya yang berjudul “Pemrograman CSS untuk 
Pemula” yang ditulis bersama Feni Agustin. Namun kini penulis 
akan memberikan kembali pengenalan dasar mengenai tipe font dan 
warna. 


491 Pemilihan Tipe Font yang Baik 


Sering pembaca bertanya meminta pendapat kepada penulis 
mengenai hasil web blog karya mereka. Ada satu hal yang sering 
penulis fokuskan, yang mungkin dianggap sepele oleh orang 
kebanyakan, yaitu pemilihan tipe font teks pada web. 


Penulis hanya memberi saran yang mungkin cukup penting bagi para 
pembaca yang ingin mengetahui tips font yang baik. Selazimnya 
pada web itu, hindarkan penggunaan teks font yang bersifat memiliki 
ekor ..kucingg kali punya ekor mas.. maksudnya adalah dari setiap 
karakter, pasti memiliki ujung, contohnya “Times New Roman”. Jika 
Anda perhatikan font teks tersebut, pasti akan terdapat ekor sebagai 
penutupnya. Berbeda jika kita menggunakan tipe font “verdana, 
tahoma, arial, dan sebagainya”. 


Jadi, apa saudara-saudara....? 
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Hendaknya hindarkan pemilihan tipe font yang memiliki ekor, 


contohnya: 


e Times New Roman 


e Korinna 


e Dan lainnya. 


Gunakan tipe font yang tidak memiliki ekor, seperti: 


e Verdana 
e Tahoma 


e Arial 


e Dan lainnya. 


499 Pemilihan Warna Terbaik dan Terburuk 


Warna merupakan aspek penting dalam pembuatan web design. 
Kombinasi pemakaian warna harus diperhatikan agar pengunjung 
merasa nyaman dan tentunya tidak melelahkan atau memberatkan 
mata karena perpaduan warna yang kurang cocok. Berikut penulis 
beberkan komposisi kombinasi warna terbaik dan terburuk. 


Kombinasi Warna Terbaik 


Background Garis dan Teks (Normal) | Garis dan Teks (Tebal) 
Putih Biru (9496), Hitam (6996), 
Hitam (6396), Biru (6396), 
Merah (2596) Merah (3196) 
Hitam Putih (7546), Kuning (69X), 
Kuning (63X) Putih (5996), 
Hijau (2596) 
Merah Kuning (75X), Hitam (5096), 
Putih (5626), Kuning (44X), 
Hitam (4496) Putih (4496), 
Cyan (3196) 
Hijau Hitam (100x), Hitam (6996), 
Biru (5696), Merah (6356), 
Merah (2596) Biru (3196) 
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Biru Putih (8196), Kuning (38X), 
Kuning (50X), Magenta (3196), 
Cyan (25x) Hitam (3196), 
Cyan (3146), 
Putih (2596) 
Cyan Biru (6996), Merah (5696), 
Hitam (5696), Biru (5096), 
Merah (3796) Hitam (4496), 
Magenta (2546) 
Magenta Hitam (6396), Biru (5096), 
Putih (5696), Hitam (4456), 
Biru (4496) Kuning (25X) 
Kuning Merah (6356), Merah (7596), 
Biru (6396), Biru (6396), 
Hitam (5696) Hitam (5096) 
Kombinasi Warna Terbaik 
Background Garis dan Teks (Normal) | Garis dan Teks (Tebal) 
Putih Kuning (10096), Kuning (94X), 
Cyan (9446) Cyan (754) 
Hitam Biru (8796), Biru (8196), 
Merah (4456), Magenta (3196) 
Magenta (2596) 
Merah Magenta (8196), Magenta (6996), 
Biru (4496), Biru (5096), 
Hijau & Cyan (25x) Hijau (3796), 
Cyan (25x) 
Hijau Cyan (8146), Cyan (8146), 
Magenta (5096), Magenta & Kuning 
Kuning (3726) (4496) 
Biru Hijau (6296), Hijau (4496), 
Merah & Hitam (3796) Merah & Hitam (3196) 
Cyan Hitam (8196), Kuning (69X), 
Kuning (75X), Hijau (6296), 
Putih (3196) Putih (568) 
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Magenta Hijau (7596), Cyan (8146), 
Merah (5696), Hijau (6996), 
Cyan (4446) Merah (4496) 

Kuning Putih & Cyan (8196) Putih (8196), 


Cyan (56x), 
Hijau (2596) 


Maksudnya ngerti ga ya?.. 


gini.. itu merupakan perpaduan latar 


belakang dengan pondasi yang menopangnya, seperti garis tebal, 
tipis, dan sebagainya. Sedangkan persen, merupakan jumlah pro- 
sentasi kecocokan kombinasi. 9 


493 Arti Sebuah Warna pada Tampilan Web 


Apakah Anda tahu warna yang Anda gunakan pada sebuah website? 
Hati-hati loh, warna juga mengandung sebuah makna. Perhatikan 
makna positif dan makna negatifnya. 


pertumbuhan, stabil, santai 
kesuburan, harapan. 


Warna Makna Positif Makna Negatif 

Merah Kekuatan, energi, tenaga, Bahaya, perang, 
hasrat, cinta. Dengan sedikit | kekejaman, kekerasan, 
memberikan warna merah api, darah. Terlalu banyak 
bisa menimbulkan gairah, warna merah bisa 
membangkitkan semangat, disangka terlalu agresif. 
mendorong keinginan. 

Merah Kewanitaan (feminim), Naif, kelemahan, 

Muda (Pink) | keremajaan (masa muda). kekurangan. 

Orange Kehangatan, bersemangat, Meminta dan mencari 
ceria, keseimbangan, musim | Perhatian. 
gugur, menimbulkan getaran. 

Kuning Sinar matahari, emas, Tidak jujur, pengecut, 
kekayaan, keberuntungan, cemburu, iri hati, 
kehidupan. penghianatan, penipuan, 

kebohongan, risiko, sakit. 

Hijau Alam, lingkungan, hidup, Kecemburuan, nasib 


buruk, iri hati, dengki. 
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Biru Kepercayaan, kesetiaan, Kesedihan, kedinginan, 
ketenangan, kedamaian, depresi, penurunan 
ketulusan, kesejukan, air, Vitalitas. 
awan, harmoni, kebersihan, 
konservatif, percaya diri, 
penyembuhan. Merupakan 
warna yang aman dipakai 
untuk desain. 

Ungu Kebangsawanan, perubahan, | Kesombongan, 
spiritual. keangkuhan, kejam, 

kasar, duka cita. 

Coklat Tanah, bumi, netral, hangat, | Tumpul, kotor, 
keamanan, perlindungan. membosankan. 

Abu-abu Modern, cerdas, bersih, Umur tua, kesedihan, 
kokoh, masa depan, bosan. 
intelektual. 

Putih Kesucian, kebersihan, Kematian (budaya timur), 
kemurnian, kesederhanaan, dingin, mandul, steril, 
damai, kebaikan, disiplin, klinik, hampa. 
perawan, perkawinan, 
musim. 

Hitam Kekuatan, keanggunan, Kematian (budaya barat), 
kemewahan, misteri, takut, setan, kesedihan, 
kecanggihan, kemakmuran, duka cita, marah, anonim, 
kepuasan, pengalaman, penyesalan. 
keras, kokoh, sangat kuat. 


Dari semua font dan warna yang telah penulis berikan, jadi 
kesimpulan yang dapat kita ambil, pilihlah warna yang menurut 
sesuai dengan karekteristik Anda, kampus, atau 
universitas, maupun lainnya. 


Anda tepat, 


4.3 MEMBANGUN LAYOUT WEB 


Layout dapat diartikan sebagai tatanan utama suatu sistem. Jadi bisa 
dibilang template masternya web. Banyak cara yang dapat diambil 
oleh Anda. Jika tak ingin direpotkan, Anda bisa menggunakan web 
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template gratisan yang tersebar di web, cukup di-search aja di 
google, dengan keyword “Free Download Template HTML Gratisan”. 
Cukup simpel kan.. ga pake panjang, kita melangkah ke pem- 
bahasan membangun layout web sistem. 


431 Teknik CSS Layout Web Sistem 


Seperti yang dikatakan dari awal bahwa kita akan membangun 
konsep 1 kolom, dimaksudkan agar lebih mudah dalam memahami 
kode per kode-an. Di sini penulis menggunakan gambar yang telah 
dibuat dengan Adobe Photoshop, yaitu logo Asfa Solution berikut. 


II Asfa Solution 
Goluti Ono Best Solution For Your Business 


ution For Your Business 


Gambar 4.2 Banner web 


Berikut kode css dari sistem web tersebut, bisa Anda simpan dengan 
nama styles.css. 


margin-top: 3px: 

font: 12px/1.5 "Lucida Sans Unicode", “"Lucida Grande", 
sans-serif, 

color: #444444: 

background-color: #3999: 
) 


a:focus (| 
outline: 1px dotted invert: 
) 


hl ( 
font-size: 30px: 
letter-spacing: -1.5px, 
) 
ed 
font-size: 24pxj 
letter-spacing: -lpx: 
) 
h3 ( 


font-size: 18px: 
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h4 
font-size: 14px, 
h5 
font-size: 12pxj 
h6 
font-size: 10pxj 
ol 
list-style: decimal, 
list-style-position: inside: 
) 
ul.bullets ( 


list-style: disc: 
list-style-position: inside: 
) 


ul.bullets li ( 
margin-left: 20pxj 
margin-bottom: 5pxj 


p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address, fieldset ( 
margin-bottom: 15px, 


a, a:visited ( 
color:#0063be: text-decoration: none: 


a:hover, a:active ( 
text-decoration: underline: 


hl a, h1l a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited, h4 a, 
h4 a:visited, h5 a, h5 a:visited, h6 a, h6 a:visited ( 

color: #444444:j 
) 


hl a:hover, hl a:active, h2 a:hover, h2 a:active, h3 a:hover, h3 
a:active, h4 a:hover, h4 a:active, h5 a:hover, h5 a:active, h6 
a:hover, h6 a:active ( 

color:#0063be: 


.align-left 1 
text-align: left: 
) 
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.align-right 
text-align: right: 


.align-center 
text-align: center: 


.align-justify 
text-align: justify, 


“float-left 
float: left, 


.float-right 
float: right: 


.bottom-spacing ( 
margin-bottom: 20px, 


header ( 
margin-bottom: 20px, 
width: 880pxj 
margin: 0px auto, 


header-status ( 
background: #fff, 
padding: 0: 
color: #aaaaaa: 


text-invitation ( 
display: block: 
float: left, 
padding: 9px 0 11lpx Oz 


message-notification ( 
display: block: 
float: left, 


background: url('../images/master/mail-g-bg.jpg") 


no-repeat, 
color: #6dc6eT1: 
padding: 9px 0 11px 0, 
text-decoration: none: 
margin-left: 10pxj 

) 


#message-notification span ( 
color: #444444, 


PA AA ESA RA ES Page elements ------------------ 


top 


left 
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margin-right: 15pxj 
text-align: center: 
display: block: 
float: left, 
width: 32px, 

) 


#message-notification a:hover, 
color: #ffffff, 
) 


aflogout, a#flogout:visited (| 
display: block: 
float: right: 
background: 

right no-repeat,: 
color: #000: 
font-weight: bold: 
padding: 9px 20px 11px Opxj 
text-decoration: none: 
font-size: 13pxj 


aflogout:hover, af#flogout:active (| 
color: #£f£0000: 


header-main ( 


height: 4pxj, 


header-main #logo (| 
background: url ('../images/master/logo.gif") 
Opx, 
width: 

height: 


1008: 
4px, 


subnav ( 
background: 

bottom left, 
height: 48pxj 


#ffffff 
repeat-x 


subnav ul 
list-style: 
margin: 0: 
padding: 0: 


none: 


subnav ul li ( 
float: left, 
margin: 0 18px 0 0: 
padding: 0: 


subnav ul a, #subnav ul a:visited (| 
display:block: 
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url ('../images/master/icon-logout.gif") 


#message-notification a:active (| 


center 


no-repeat left 


url ('../images/master/submenu-bg.gif") 


float: left, 

color:#0063be: 

font-size: 14pxj 

padding: 9px 0 0 0: 

text-decoration: none: 
) 


#subnav ul a:hover, #subnav ul a:active (| 
text-decoration: underline: 
) 


#footer ( 
padding: 0: 
color: #fffj 
padding: 12px 0 15px 0: 
margin-left: 30pxj 
width: 880pxj 
background: #ccc: 
margin: 0px auto, 


an an Tenan Nav tabs (sliding door technigue) --------- 


ul#nav ( 
float: left, 
margin-top: 60px, 
list-style: none, 
font-size:14pxj 
margin-bottom: 0: 
margin-left: 1$: 

) 


ulf#nav li ( 

background:transparent url('../images/master/tab-left.gif") 
no-repeat scroll left top: 

float:left: 

margin:0 5px 0 0j 

padding:0 0 0 9pxj 
) 


ulf#nav li a, ul#nav li a:visited ( 

background:transparent url ('../images/master/tab- 
right.gif"') no-repeat scroll right top: 

color: #FFFFFEF, 

display:block: 

float:left: 

padding:7px 15px 6px 6pxj 

text-decoration:none: 
) 


ul#nav li a:hover ( 
padding:8px 15px 5px 6px, 
) 


ul#nav lifcurrent ( /“ give the id-"current" to the currently 
selected tab “/ 
background:transparent url ('../images/master/tab-active- 


left.gif') no-repeat scroll left top, 
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) 


ul#nav lifcurrent a ( 

background:transparent url ('../images/master/tab-active- 
right.gif"') no-repeat scroll right top: 

color: #444444: 


PN AS AA REA SEE Box module -------------------- Th 
div.module ( 

background: url('../images/master/module-body-left-bg.gif") 
no-repeat scroll bottom left: 

float: left, 

width: 1008: 

margin-bottom: 20px, 
) 


div.module div.module-body ( 

background: url ('../images/master/module-body-right- 
bg.gif') no-repeat scroll bottom right, 

padding: 20px 3$ 20px 38: float: left, width: 1008: 
) 


/“ Percentage padding in the module dependant on the cell width “/ 
.grid 1 div.module div.module-body ( 

padding: 20px 8$ 20px 88: 

float: left, 

width: 8484: 


.grid 2 div.module div.module-body ( 
padding: 20px 178 20px 15, 
float: left, 
width: 868: 


.grid 3 div.module div.module-body ( 
padding: 20px 6$ 20px 68: 
float: left, 
width: 888: 


.grid 4 div.module div.module-body ( 
padding: 20px 58 20px 58: 
float: left, 
width: 908: 


.grid 5 div.module div.module-body ( 
padding: 20px 4$ 20px 485, 
float: left, 
width: 925j 


.grid 6 div.module div.module-body ( 
padding: 20px 38 20px 38: 
float: left, 
width: 948: 
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) 


.grid 7 div.module div.module-body ( 
padding: 20px 2.758 20px 2.158, 
float: left, 
width: 94.58j 


.grid 8 div.module div.module-body ( 
“— padding: 20px 2.54 20px 2.584: 
float: left, 
width: 958: 


.grid 9 div.module div.module-body ( 
padding: 20px 2.258 20px 2.25$j 
float: left, 
width: 95.58, 
) 


.grid 10 div.module div.module-body ( 
“— padding: 20px 24 20px 24: 
float: left, 
width: 968: 
) 


.grid 11 div.module div.module-body ( 
padding: 20px 1.758 20px 1.758: 
float: left, 
width: 96.58: 


) 


.grid 12 div.module div.module-body ( 
padding: 20px 1.58 20px 1.58, 
float: left, 
width: 978, 


) 


div.module div.module-table-body ( 


background: url ('../images/master/module-body-right- 
bg.gif') no-repeat scroll bottom right, 
padding: 0: 


float: left, 
width: 1008: 
) 


div.module h2 (f 
background: url ('../images/master/module-header-left-bg.gif") 

no-repeat scroll top left, 

display: block: 

height: 32pxj 

margin: 0px auto, 

text-decoration: none: 

color: #444444: 

font-family: Arial, Helvetica, sans-serif, 

font-size:12px,j 

font-weight:bold: 

width: 958j 
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letter-spacing: normal 
) 


div.module h2 span ( 


background: url ('../images/master/module-header-right- 


bg.gif') no-repeat top right, 
display: block: 
line-height: 20pxj 
padding: 7px 0 5px 18px, 
) 


div.module table ( 
width: 958j 
margin: 0px auto, 
margin-bottom: 10px, 
border-left: 1lpx solid #d9d9d9: 
border-bottom: 1lpx solid #d9d9d9: 
border-top: lpx solid #49d949: 

) 


div.module table .distribute ( 

width: 908: 

margin: 0px auto, 

margin-bottom: 10px, 
border-left: 1lpx solid #d9d949: 
border-bottom: 1lpx solid #d94949: 
border-top: lpx solid #d9d94d9: 
) 


div.module table.tr (| 

border-collapse: separate: 
border-right: 1px solid #aaaaaaj 
border-left: Ipx solid #aaaaaa:j 


) 


div.module table th ( 

background-color: #eeeeee: 

color: #4444414j 

padding: 5pxj 

text-align: left: 

border-right: 1px solid #49d949: 
border-bottom: 1lpx solid #d94949: 


) 


div.module table td ( 
/“ background-color: #ffffff, “/ 
padding: 5pxij 
border: 1lpx solid #d9d94d9: 
border-right: lpx solid #d949d9: 


div.module table tr.odd td ( 
/“ background-color: #flf5fa: “/ 


.table-apply ( 


Opx, 
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width: 108: float: right: text-align: 


left, 


margin-right: 


display: block: padding: 0px 10px 10px 10px: width: 408, 
float: left, 
) 


.pager .first,.pager .prev,.pager .next,.pager .last ( 
margin-bottom: -2px, 


PAP ESA EA AS SAS Button (sliding door technigue) ----------- 
ena Ea x/ 
/“ button outside a module box “/ 
a.button (| 
/“ Sliding right image “/ 
background: transparent url ('../images/master/button-right- 


bg-m.gif"') no-repeat scroll top right: 
display: block: 
float: left, 
height: 26pxj, 
padding-right: 11lpx, 
text-decoration: none: 
color: #444444:j 
font-family: Arial, Helvetica, sans-serif,: 
font-size:12pxj 
) 


a.button span ( 

background: transparent url('../images/master/button-left- 
bg-m.gif') no-repeat top left, 

display: block: 

line-height: 15pxj 

padding: 4px 0 7px 10pxj 

) 


a.button:hover ( 
background-position: bottom right: color:#0063be: 
) 


a.button:hover spani 
background-position: bottom left, 
color:#0063be: 

) 


div.module a.button ( 

background: transparent url('../images/master/button-right- 
bg.gif') no-repeat scroll top right: 

display: block: 

float: left, 

height: 26px, 

padding-right: 11lpx, 

text-decoration: none: 

color: #4444414j 

font-family: Arial, Helvetica, sans-serif, 

font-size:12pxj 
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) 


div.module a.button span ( 

background: transparent url('../images/master/button-left- 
bg.gif') no-repeat top left, 

display: block: 

line-height: 15pxj 

padding: 4px 0 7px 10px, 


(ALA LN. Pagination -------------------- x/ 
.pagination ( margin-bottom: 20px: float: right: |) 

.pagination a.button ( margin-right: 10px: |) 

.pagination a.last ( margin-right: 0: ) 

.pagination .numbers ( float: left, padding-top: 3px: margin-right: 
15px, ) 

.pagination .numbers span ( padding: 0 5px 0 5px, |) 

.pagination .current ( font-weight: bold: ) 


fieldset ( 
margin-top: 15pxj 
margin-bottom: 15px, 


legend ( 
margin-bottom: 10px, 
display: block: 


label ( 
display: block: 
margin-bottom: 5pxj 


.input-short, .input-medium, .input-long ( 
padding: 3pxj 


select i 
padding: 2pxj 


textarea (| 
padding: 3pxj 


.input-short ( 
width: 258 


.input-medium ( 
width: 508 


.input-long ( 
width: 758 
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) 


input. input-short, input. input-medium, input. input-long, select, 
textarea (| 

background: url('../images/master/input-bg.gif') top left 
repeat-x #fb6f6f6, 

border: 0: 

border: 1px solid #cccccc: 


input. input-short: focus, input. input-medium: focus, input. input- 
long:focus, select:focus, textarea:focus ( 

background: url('../images/master/input-bg-focus.gif') top 
left repeat-x #ffffff, 

border-color: #a9c24dlj 


input.submit-green ( 


background: url('../images/master/submit-green-bg.gif') top 
left repeat-xj 
border: 0: 


border-top: lpx solid #6bd091: 
border-left: 1Ipx solid #6bd09l1: 
border-right: 1px solid #349c5c: 
border-bottom: 1px solid #349c5cj 
color: #ffffff, 

font-size: 14pxj 

padding: 2px 12px, 

margin: Opx 10px 0 0j 

cursor: pointer: 


) 


input.submit-green-hover ( 

background-image: url ('../images/master/ submit-green-bg- 
hover.gif'): 
) 


input.submit-gray ( 


background: url('../images/master/submit-gray-bg.gif') top 
left repeat-xj 
border: 0j 


border-top: l1lpx solid #cccccc: 
border-left: 1lpx solid #cccccc: 
border-right: l1px solid #888888: 
border-bottom: 1lpx solid #888888: 
color: #ffffff, 

font-size: 14pxj 

padding: Zpx I2pxy 

margin: Opx 10px 0 0j 

cursor: pointer: 


) 


input.submit-gray-hover ( 

background-image: url ('../images/master/submit-gray-bg- 
hover.gif'): 
) 
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(XS 2222 NN LN LL. Text input and select input notifications - 


.notification-input ( 
background:10px 508 no-repeat: 
margin: 0 0 0 5px: 
padding:5px 0 5px 32px: 
font-size: 12pxj 

) 


.ni-correct ( 
background-image:url('../images/master/tick-on-white.gif"'): 
color: #00ae42: 

) 


.ni-error ( 

background-image:url ('../images/master/cross-on- 
white.gif'), 

color: #c92824d: 


.notification ( 

display: block: 
padding: 20px 20px 20px 45pxj 
border: lpx solid, 
margin-bottom: 20px, 
background-repeat: no-repeat: 
background-position: 20px 20pxj 


.Nn-success ( 
background-color: #a3ebbd: 

border-color: #68459b: 

background-image: url ('../images/master/notification- 
tick.gif"):j 

) 


.n-information ( 

background-color: #9fddea: 

border-color: #S5fceea: 

background-image: url ('../images/master/notification- 
information.gif'): 


) 


.n-attention ( 

background-color: #f9e497: 

border-color: #ffcb4f: 

background-image: url ('../images/master/notification- 
exclamation.gif"): 
) 


.n-error ( 
background-color: #ffcecaj: 
border-color: #efb9c3: 


56 


background-image: url ('../images/master/notification- 
slash.gif"): 


“indicator 
width: 220pxj 
height: 12pxj 
background: url ('../images/master/indicator-bg.gif") no- 
repeat top left, 
) 


.indicator div ( 

height: 12pxj 

background: url ('../images/master/indicator-green-to- 
red.gif') no-repeat top left: 
) 


.indicator div.reverse (| 
background: url ('../images/master/indicator-red-to- 
green.gif") no-repeat top left, 


PA AR REA ES Category list -------------------- x/ 


a.removable, a.removable:visited ( 
padding: 5px 18px 5px Opx, 
) 


a.removable:hover,a.removable:active ( 
background: url ('../images/master/cross-small.gif") no- 
repeat center right, 


POSE AAA AS To-do list -------------------- €/ 


a.checkable,a.checkable:visited ( 
padding: 5px 18px 5px Opx, 
) 


a.checkable:hover, a.checkable:active ( 

background: url ('../images/master/tick-small.gif") no- 
repeat center right, 
) 


a.completed, a.completed:visited ( 
color: #aaaaaa: 


Pa SAE AS Messages -------------------- #/ 
.separated ( 

border-top: lpx solid #cccccc: 

padding-top: 15pxj 
) 


.user ( 
display: block: 
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padding-left: 22px, 

background: url('../images/master/user.gif') left 508 no- 
repeat: 

font-size: 14px: color: #666666: 

font-weight: normal: 
) 


.user-female ( 

display: block: 

padding-left: 22px, 

background: url ('../images/master/user-female.gif") left 
508 no-repeat: 

font-size: 14pxj 

color: #666666: 

font-weight: normal: 
) 


.reply ( 

padding-left: 20px, 

background: url ('../images/master/arrow-curve-180- 
left.gif') left 508 no-repeatj 

margin-right: 7pxj 


) 


.forward ( 
padding-left: 20px, 
background: url ('../images/master/arrow-curve-000- 
left.gif') left 508 no-repeatj 
margin-right: 7pxj 


) 


a.delete, a.delete:visited ( 

padding-left: 16px, 

background: url ('../images/master/cross-small.gif"') left 
508 no-repeat: 

color: #CO0O: 
) 


h3.mail ( 
display: block: 
padding: 20px 0px 20px 70pxs 
background: 
url ('../images/master/Crystal Project mail open.gif') left 508 no- 
repeat: 
) 


#p-messages (| 
padding: 20px, 


KAA ESA ATA Login page -------------------- KA 
form.login ( 

background: 
url ('../images/master/Crystal Clear locked.gif") 873 10px no- 


repeat: 
) 
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a.dashboard-module, a.dashboard-module:visited ( 
width: 142pxj 
height: 142px, 
display: block: 
float: left, 
background: url ('../images/master/dashboard-module 
top left no-repeat: 
margin: 0 8px 8px 0: 
text-align: center: 
color: #444444j 
) 


a.dashboard-module:hover, a.dashboard-module:active ( 
background-position: bottom left: 
text-decoration: none: 
color:#0063be: 


) 


a.dashboard-module img ( 
margin-top: 20pxj 
, 


a.dashboard-module span ( 
margin-top: 10pxj, 
display: block: 


td.data ( 
width: 130pxj 


tr.data:hover ( 
background-color: #00CCFF: 


div.data ( 
width: 958: 
height: 215pxj 
overflow: auto: 
border-top-style: none: 
border-bottom-style: groove: 
border-right-style: groove: 
border-left-style: groove: 
border-color: lightblue, 
margin: 0px auto, 


thi 
height: 30pxj, 
font-family: Arial: 
font-size: 12pxj 

) 


table. jumlah ( 
border-width: 2pxj 
border-style: groove: 


sgt) 
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border-color: lightblue, 

width: 455pxj 

height: 40px, 
-moz-border-radius-bottomleft : 9pxj 
-moz-border-radius-bottomright : 9px, 
-webkit-border-bottom-left-radius : 9px, 
-webkit-border-bottom-right-radius : 9pxj 


Wow.. udah ribet, panjang lagi... tenang gan, jika Anda ga mau 
direpotkan, ane uda sertain proyek lengkapnya kok.. & 


Nah, kemudian berikut kode html yang dapat ditulis. 


Shtml» 
Sheadb 
«meta http-eguiv-"content-type" content-"text/html:, charset-utf- 
8" /» 
Ktitle» Asfa Solution - Sistem Akademik Nilai «/title» 
dlink rel-"stylesheet" href-"css/grid.css" type-"text/css"» 
dlink rel-"stylesheet" href-"css/styles.css" type-"text/css"» 
«meta http-eguiv-"Copyright" content-"Asfa Solution"» 
«Xmeta name-"Author" content-"Agus Saputra"» 
«/head» 


«body» 


«div id-"header"» 
«div id-"header-status"» 
«div class-"container 12"» 
Xdiv class-"grid 8"» «br» &nbsp: snbsp: &nbsp: snbsp: &nbsp, 
&snbsp: img src-"images/header. jpg" width-"400"» «/div» 
cdiv class-"grid 4"»5 
«div class-"module"» 
«div class-"module-body"» 
Kstrong»User ID : «/strong» br» 
«strong?Full Name : «/strong»xbr» 
Kstrong?Login As :«/strong» 


«/divb 
«/divs 
«div style-"clear:both:"»x«/div» 
«/div? 
«/divb 
«div style-"clear:both:"»x«/div» 
«/divb 


«div id-"header-main"» 
«div class-"container 12"» 
«div class-"grid 12"» 
«div id-"logo"» 


«/divb 
«/divb 
«div style-"clear: both:"»x/div» 
«/div 
«/ div 
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«div style-"clear: both:"»x/div» 
«/divs 


«div class-"container 12"» 


«div style-"clear:both:" «/div» 
«div class-"grid 12"»5 


X!-- Example table --» 
«div class-"module"» 
«?php include "konten.php": ?» 


«/div» «!-- End .module --» 
/ div3 
«/div» «!-- End .container 12 --» 
«!-- Footer --» 


«div id-"footer"» 

«div class-"container 12"» 

«div class-"grid 12"» 

«Xp» senbsp:enbsp:snbsp:enbsp: scopy: 2012. «XusAsfa Solution 
Akademik System«/u?«/p» 


«/div2 
«/div» 
«div style-"clear:both:"»«/div» 
«/div» «!—- End #footer --» 
«/body2 
«/ html» 


Hasil skrip di atas akan menampilkan sebuah layout yang cukup 
ciamik .. dapat Anda lihat pada Gambar 4.3. 


(ren 


(EJ Asfa Solution - Sistem Akademik Nilai : 
& BI tocalhost/akademik/master.php @|Isg- Googte ella ia 


— User ID 


: Asfa Solution Full Name 
SO| Uti Ono Best Solution For Your Business Login As 


Welcome to Administrator System 


Hai Tommy, S.Kom., Selamat datang di halaman utama sistem akademik kampus, Anda dapat 
mengolah segala aktifitas dalam sistem ini.. semua aktifitas yang Anda lakukan akan terekam dalam 
database. 


Date Login: 2012-03-08 21:51:46 


Gambar 4.3 Layout Web 
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439 Menggunakan jOuery Menu 


Pada konsep web, terdapat baris yang berisi kolom menu. Kita akan 
menerapkan menu top menggunakan bantuan jAuery. 


Pada Bonus CD, Anda akan menemukan folder yang berisi menu 
yang dimaksud. Nama folder-nya, yaitu menu yang terdapat dalam 
folder “Source Code”. Anda cukup copy semua file javascript dan css 
menu ke dalam folder layout Anda. 


Panggil file javascript pada file yang telah kita buat sebelumnya. 
dlink rel-"stylesheet" href-"css/menu.css" type-"text/css"» 


«script type-"text/javascript" src-"js/jguery.js"»«/script» 
«script type-"text/javascript" src-"js/menu.js"«/script? 


Tambahkan pada skrip body. 


«div id-"menu"» 
Kul class-"menu"» 


Kli»Ka href-"master.php"»x«span?Homex/span»«/a»«/li? 

Kli»Ka href-"?module-upload"»x«span?Manajemen Kampus«/span? 
«/as 

Kul? 

KlirKa href-" ?module-manajemen user"»Manajemen 
User«/ar«/lis 

Klixa href-" »module-manajemen prodi" »Manajemen Program 
Studix/a»x/li? ii 

KlirKa href-" ?module-manajemen jurusan" "Manajemen 
Jurusan«/arX/li? 

Slira href-" »module-manajemen makul" »Manajemen Mata 
Kuliahs/a»«/li?s Sa 

Slibxka href-"?module-manajemen kelas" »—Manajemen elasx/a? 
«/l1is 

KlirKa href-" ?module-manajemen jadwal makul"»Manajemen 
Jadwal Kuliahx/a»«/li» ia 

«/uls 

«/li2 

Kli»Ka href-" mmodule-reporting"»«span?Laporan«/span»«/a? 

Kul? 

KlirKa href-"?module-report dosen"»Data Dosen«/a»X/li» 

SlirKa href-"?module-report mahasiswa"»Data 
Mahasiswas/a»«/li» 

«/ul3 

«/1is 

cli class-"last"»x«span»x«a href-" logout .php"» 
Logout«/a»X«/span»X«/li»b 

«/ul3 

«/divs 
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Jika Anda refresh pada skrip di atas, maka tampilan layout akan 
tersisipkan sebaris menu, yang dapat Anda lihat pada Gambar 4.4. 


(D sistem Akademik Nilai - Asfa Solution — | : 
16) @. tocathost/akademik/master.php Co || coogte BEI 


User ID : tc 


Asfa Solution Fall Name » Torn 


Best Solution For Your Business Li sik ken naa 
Home | Manajemen Kampus | Laporan 


Welcome to Administrator System 


Hai Tommy, S.Kom., Selamat datang di halaman utama sistem akademik kampus, Anda dapat mengolah segala aktifitas dalam sistem ini.. 
semua aktifitas yang Anda lakukan akan terekam dalam database. 


Date Login: 2012-03-08 22:15:35 


Gambar 4.4 Layout Web dengan j@uery Menu 
Jika Anda ingin melihat real menu, dapat Anda lihat Gambar 4.5. 


| 


Uu) Sistem Akademik Nilai - Asfa Solution Sg 


(6) @M tkocalhost/akademi 17  € | 3 IE 3 


Home Manajemen Kampus Laporan Logout 


Manajemen Mata Kuliah 


http://localho...najemen. makul 


Gambar 4.5 Menu j@uery 
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4.4 FITUR UTAMA YANG DIBUTUHKAN 


Ada beberapa fitur utama yang perlu diperhatikan, di antaranya 
pencegahan terhadap input data, seperti: 


1. 


Penangkalan terhadap data mahasiswa yang memiliki NIM yang 
sama. 


Penangkalan terhadap input data dengan mengosongkan NIM 
mahasiswa. 


Pencegahan terhadap penginputan nilai, dalam arti jangan 
sampai kita memasukkan 2 nilai terhadap mata kuliah yang 
sama. 


Pencegahan hak akses user untuk menolak hal-hal yang tak 
diinginkan. 


Dalam perhitungan transkrip atau IPK (Indeks Prestasi 
Kumulatif), perhitungan harus dibulatkan ke dalam pecahan 
desimal 2 angka di belakang koma. 


Mungkin sih sepertinya itu saja, dan jika Anda ingin mengem- 
bangkan sistem ini, Anda bisa menggunakan fitur utama SMS 
Gateway seperti yang pernah penulis tulis pada seri buku “Step by 
Step Membangun Aplikasi SMS dengan PHP dan MySAL” yang 
diterbitkan PT Elex Media Komputindo. 
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